<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <div class="wrap">
    <header>
      <ul>
        <li><RouterLink to="/test">test</RouterLink></li>
        <li><RouterLink to="/test2">test2</RouterLink></li>
        <li><RouterLink to="/base">base</RouterLink></li>
        <li><RouterLink to="/pinia">pinia</RouterLink></li>
        <li><RouterLink to="/cart">cart</RouterLink></li>
        <li><RouterLink to="/todoMVC">todoMVC</RouterLink></li>
      </ul>
    </header>
    <RouterView class="routerView"/>
  </div>
</template>

<style scoped>
.wrap {
  display: flex;
  width: 100%;
}
header {
  width: 200px;
  height: 100vh;
  margin: 100px 0 0 0;
  text-align: center;
}
.routerView {
  width: calc(100% - 200px);
  padding: 20px 0 0 0;
}
</style>
